<template>
	<view class="xm-padding-30r">
		<view class="xm-flex-r xm-justify-between" style="width: 100%;height: auto;">

			<view class="xm-flex-r">
				<view class="" style="width: 100rpx;height: 100rpx;border-radius: 50%;background-color: #007AFF;">
					<image :src="Item.top_icon" style="width: 100rpx;height: 100rpx;border-radius: 50%;" mode="aspectFill"></image>
				</view>
				<view class="" style="margin-left: 30rpx;">
					<!-- 刘辉 -->
					{{Item.user_name}}
				</view>
			</view>

			<view class="xm-fontsize-30 xm-flex-c" style="color: #2C405A;">
				<!-- 2012012415 -->
				{{Item.date}}
				<view class="xm-flex-rr xm-fontsize-25" style="margin-top: 30rpx;" v-if="Item.user_id==user_id">
					<view class="item_button" @click="type==1?(type=2):(type=1)">
						修改
					</view>
					<view @click="deletpl()" class="item_button" style="margin-right: 30rpx;">
						删除
					</view>
				</view>
			</view>

		</view>

		<view class="xm-fontsize-25" style="margin-top: 40rpx;line-height: 50rpx;" v-if="type == 1">
			<text selectable="true">
				{{data.comment}}
				<!-- 相互踢相互踢相互踢相互踢相互踢相互踢相互踢相互踢相互踢相互踢
				相互踢相互踢相互踢相互踢
				相互踢相互踢相互踢相互踢相互踢相互踢相互踢相互踢相互踢相互踢 -->
			</text>
		</view>
		<view class="xm-padding-30r" style="width: 90%;margin: auto;height: 500rpx;margin-top: 130rpx;border: 4rpx #0000FF solid;" v-if="type == 2">
			
			<textarea :value="data.comment" v-model="data.comment" placeholder="请输入修改后的评论 ~ ~ ~" style="width: 100%;height: 80%;"/>
			<view class="xm-flex-r xm-justify-between">
				
				<view @click="updateComment()" class="xm-jb-201" style="margin-top: 40rpx;height: 60rpx;line-height: 60rpx;width: 250rpx;border-radius: 20rpx;text-align: center;color: #6262d9;">
					确认修改
				</view>
				<view @click="type=1" class="" style="background: #98cfd3; margin-top: 40rpx;height: 60rpx;line-height: 60rpx;width: 250rpx;border-radius: 20rpx;text-align: center;color: #4e4f5b;">
					取消修改
				</view>
			</view>
			
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id: undefined,
				pl_id: undefined,
				userlist: undefined,
				Item: undefined,
				data:undefined,
				type:1
			}
		},
		onLoad(data) {
			var that = this

			console.log(data);
			that.pl_id = data.pl_id
			// this.userList()
			uni.getStorage({
				key: "token",
				success: data => {
					console.log(data.data);
					this.user_id = data.data
					this.userList()
				}
			})

		},
		methods: {
			userList() {
				this.$http(this.$url.user.list, "get")
					.then(res => {
						if (res.code == 0) {
							console.log(res);
							this.userlist = res.list
							console.log(this.userlist);
							this.getPL()
						}

					})
			},
			updateComment() {
				this.type = 1
				this.$http(this.$url.comment.update, "post", 
					this.data
				, {
					'content-type': 'application/json'
				}).then(res => {
						if (res.code == 0) {
							console.log(res);
							this.$api.msg("修改成功")
						}
			
					})
			},
			deletpl(){
				var that = this
				uni.showModal({
					content: '确定删除该评论吗 ？',
					success: function (res) {
						if (res.confirm) {
							console.log("点击");
							
							that.$http(that.$url.comment.delete, "post", 
								{
									pl_id:that.data.pl_id
								}
							, {
								'content-type': 'application/json'
							}).then(res => {
								if (res.code == 0) {
									console.log(res);
									that.$api.msg("删除成功")
									that.$api.gotoType("back")
								}	
							})
						} else if (res.cancel) {
							
						}
					}
				});
				
			},
			getPL() {
				var that = this
				this.$http(this.$url.comment.findone, "post", {
					pl_id: this.pl_id
				}, {
					'content-type': 'application/json'
				}).then(res => {
					if (res.code == 0) {
						var item = res.data
						this.data = res.data
						console.log(res);
						this.userlist.forEach(data => {

							if (item.user_id == data.user_id) {
								// console.log("第三层");
								let bean = {
									comment: item.comment,
									date: item.date,
									fg_id: item.fg_id,
									pl_id: item.pl_id,
									user_id: item.user_id,
									user_name: data.user_name,
									top_icon: data.top_icon,
									imgs: item.imgs
								}

								that.Item = bean

								// if (bean.imgs != null) {
								// 	that.imgs = item.imgs.split(",")
								// }
								console.log(that.Item);
							}

						})
					}
				}).catch(err => {
					this.$api.msg("网路异常或无网络连接")
				})

			}
		}
	}
</script>

<style>
	.item_button {
		width: 60rpx;
		height: 40rpx;
		line-height: 40rpx;
		border: 2rpx #007AFF solid;
		text-align: center;
		border-radius: 18rpx;
		color: #007AFF;
	}
</style>
